<template>
  <div class="user-management">
    <div class="page-header">
      <h1>用户管理</h1>
      <p>管理系统用户和权限</p>
    </div>
    
    <!-- 搜索和操作栏 -->
    <div class="toolbar">
      <el-card>
        <el-row :gutter="20" align="middle">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索用户名或学号"
              :prefix-icon="Search"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchForm.status"
              placeholder="用户状态"
              clearable
            >
              <el-option label="正常" :value="0" />
              <el-option label="禁用" :value="1" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="success" @click="handleAddUser">
              <el-icon><Plus /></el-icon>
              添加用户
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 用户列表 -->
    <div class="users-section">
      <el-card>
        <el-table
          :data="userList"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="avatar" label="头像" width="80">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatar_url">
                {{ row.nickname.charAt(0) }}
              </el-avatar>
            </template>
          </el-table-column>
          
          <el-table-column prop="username" label="学号" width="120" />
          
          <el-table-column prop="nickname" label="姓名" width="120" />
          
          <el-table-column prop="email" label="邮箱" min-width="150" />
          
          <el-table-column prop="phone_number" label="手机号" width="130" />
          
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 0 ? 'success' : 'danger'">
                {{ row.status === 0 ? '正常' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="created_time" label="注册时间" width="150">
            <template #default="{ row }">
              {{ formatDate(row.created_time) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                @click="handleEditUser(row)"
              >
                编辑
              </el-button>
              <el-button
                :type="row.status === 0 ? 'warning' : 'success'"
                size="small"
                @click="handleToggleStatus(row)"
              >
                {{ row.status === 0 ? '禁用' : '启用' }}
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDeleteUser(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus } from '@element-plus/icons-vue'

export default {
  name: 'UserManagement',
  components: {
    Search,
    Plus
  },
  setup() {
    const loading = ref(false)
    
    const searchForm = reactive({
      keyword: '',
      status: ''
    })
    
    const userList = ref([
      {
        id: 1,
        username: '2021001',
        nickname: '张三',
        avatar_url: '',
        email: 'zhangsan@example.com',
        phone_number: '13800138001',
        status: 0,
        created_time: '2024-01-01 10:00:00'
      },
      {
        id: 2,
        username: '2021002',
        nickname: '李四',
        avatar_url: '',
        email: 'lisi@example.com',
        phone_number: '13800138002',
        status: 0,
        created_time: '2024-01-05 14:30:00'
      },
      {
        id: 3,
        username: '2021003',
        nickname: '王五',
        avatar_url: '',
        email: 'wangwu@example.com',
        phone_number: '13800138003',
        status: 1,
        created_time: '2024-01-10 16:20:00'
      }
    ])
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 100
    })
    
    const formatDate = (dateTime) => {
      if (!dateTime) return '未知'
      const date = new Date(dateTime)
      return date.toLocaleDateString('zh-CN')
    }
    
    const handleSearch = () => {
      console.log('搜索条件:', searchForm)
      // 这里实现搜索逻辑
    }
    
    const handleAddUser = () => {
      console.log('添加用户')
      // 这里实现添加用户逻辑
    }
    
    const handleEditUser = (user) => {
      console.log('编辑用户:', user)
      // 这里实现编辑用户逻辑
    }
    
    const handleToggleStatus = async (user) => {
      const action = user.status === 0 ? '禁用' : '启用'
      try {
        await ElMessageBox.confirm(
          `确定要${action}用户 ${user.nickname} 吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现状态切换逻辑
        user.status = user.status === 0 ? 1 : 0
        ElMessage.success(`已${action}用户`)
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const handleDeleteUser = async (user) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除用户 ${user.nickname} 吗？此操作不可恢复！`,
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }
        )
        
        // 这里实现删除用户逻辑
        ElMessage.success('已删除用户')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      // 重新加载数据
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      // 重新加载数据
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      loading,
      searchForm,
      userList,
      pagination,
      formatDate,
      handleSearch,
      handleAddUser,
      handleEditUser,
      handleToggleStatus,
      handleDeleteUser,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.user-management {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .toolbar {
    margin-bottom: 24px;
  }

  .users-section {
    margin-bottom: 24px;
  }

  .pagination-section {
    display: flex;
    justify-content: center;
  }
}
</style>
